<template>
  <!--类名a用于添加左上角的直角和右上角的直角 类名b用于添加左下角的直角和右下角的直角 -->
  <div class="box">
    <!-- 左边 -->
    <div class="left">
      <!-- 左边第一个 -->
      <div class="lmq a">
        <div class="b"></div>
        <div id="main" class="main" style="width: 100%"></div>
      </div>
      <!-- 左边第二个 -->
      <div class="lmq a">
        <div class="b"></div>
        <div id="main2" class="main" style="width: 100%"></div>
      </div>
      <!-- 左边第三个 -->
      <div class="lmq a">
        <div class="b"></div>
        <div id="main4" class="main" style="width: 100%"></div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="center">
      <!-- 数字 -->
      <div class="c-top">
        <ul>
          <li>{{ globalStatis.confirm }}</li>
          <li>{{ globalStatis.nowConfirm }}</li>
          <li>{{ globalStatis.heal }}</li>
          <li>{{ globalStatis.dead }}</li>
        </ul>
        <div>
          <span>累计确诊</span>
          <span>现存确诊</span>
          <span>累计治愈</span>
          <span>累计死亡</span>
        </div>
      </div>
      <!-- 地图 -->
      <div class="map">
        <div class="tab">
          <div>累计确诊</div>
          <div>现存确诊</div>
        </div>
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
        <div id="map" class="main" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <div class="lmq a">
        <div class="b"></div>
        <div id="main1" class="main" style="width: 100%"></div>
      </div>
      <div class="lmq a">
        <div class="b"></div>
        <div id="main3" class="main" style="width: 100%"></div>
      </div>
      <div class="lmq a">
        <div class="b"></div>
        <div id="main5" class="main" style="width: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入字体样式
import "../../public/font/font-family.css";
import "../../utils/world";
import echarts from "echarts";
import $ from "jquery";
export default {
  name: "",
  components: {},
  data() {
    return {
      countryAddConfirmRankList: [], //新增确诊top10
      TopList: [], //境外输入病例top10省份
      continentStatis: [], // 大洲感染总人数
      globalStatis: {}, //全球病情统计
      globalDailyHistory: [], //世界每周新增治愈和死亡
      foreignList: [], // 主要国家疫情信息
    };
  },
  created() {
    // 请求数据
    $.ajax({
      url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
      dataType: "jsonp",
      success: (res) => {
        let data = JSON.parse(res.data);
        console.log(data);
        //新增确诊top10
        this.countryAddConfirmRankList = data.countryAddConfirmRankList;
        // 境外输入病例top10省份
        this.TopList = data.importStatis.TopList;
        // 大洲感染总人数
        this.continentStatis = data.continentStatis;
        //全球病情统计
        this.globalStatis = data.globalStatis;
        //世界每周新增治愈和死亡
        this.globalDailyHistory = data.globalDailyHistory;
        // 主要国家疫情信息
        this.foreignList = data.foreignList;
      },
      error: (err) => {
        console.log(err);
      },
    });
  },
  mounted() {
    setTimeout(() => {
      // 新增确诊top10
      this.main();
      // 主要疫情国家治愈率
      this.main1();
      // 大洲感染总人数趋势图
      this.main2();
      // 世界每周新增治愈和死亡人数
      this.main3();
      // 大洲感染人数饼状图
      this.main4();
      // 境外输入病情top10省份
      this.main5();
      // 地图
      this.map();
    }, 1000);
  },
  methods: {
    // 新增确诊top10图表
    main() {
      var myChart = echarts.init(document.getElementById("main"));
      let list = JSON.parse(JSON.stringify(this.countryAddConfirmRankList));
      let nameArray = list.map((item) => {
        return item.nation;
      });
      let addnum = list.map((item) => {
        return item.addConfirm;
      });
      var option = {
        // 标题信息
        title: {
          text: "新增确诊TOP10",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "14px",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "14px",
          },
        },
        // 鼠标悬停显示信息
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 图表与父盒子之间的距离
        grid: {
          top: "19%",
          right: "6%",
          left: "20%",
          bottom: "16%",
        },
        xAxis: [
          {
            type: "category",
            data: nameArray,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              color: "#e2e9ff",
              interval: 1, //隔一个标签显示一个标题
              textStyle: {
                fontSize: "12px",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,1)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: addnum,
            barWidth: "12px", //柱状图每个柱子的宽度
            itemStyle: {
              normal: {
                color: "#2f89cf", //柱状图每个柱子的背景颜色
                barBorderRadius: [30, 30, 30, 30], //柱状图每个柱子的圆角边框
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", (e) => {
        myChart.resize();
      });
    },
    // 主要疫情国家治愈率
    main1() {
      var myChart = echarts.init(document.getElementById("main1"));
      var list = JSON.parse(JSON.stringify(this.foreignList));
      var data =[];
      var titlename =[];
      list.map((item) => {
        // 治愈人数/现存确诊人数
        let num=(item.heal/item.confirm)*100
        data.push(num.toFixed(1))
        titlename.push(item.name)
      });
      list=list.slice(0,5)
      titlename=titlename.slice(0,5)
      console.log(list);
      
      var valdata = [683, 234, 234, 523, 345];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      var option = {
        // 标题
        title: {
          text: "主要疫情国家治愈率",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "14px",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              formatter: function (value, index) {
                return value;
              },
            },
          },
          {
            show: false,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barWidth: "20px",
            itemStyle: {
              normal: {
                barBorderRadius: 28,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: "22px",
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 20,
              },
            },
          },
        ],
        // 图表与父盒子之间的距离
        grid: {
          top: "15%",
          right: "3%",
          left: "22%",
          bottom: "10%",
        },
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 大洲感染总人数趋势图
    main2() {
      var myChart = echarts.init(document.getElementById("main2"));
      let list = JSON.parse(JSON.stringify(this.continentStatis));
      var xData = list.map((item) => {
        return item.date;
      });
      var data1 = [];
      var data2 = [];
      var data3 = [];
      var data4 = [];
      var data5 = [];
      list.map((item) => {
        data1.push(item.statis["亚洲"] ? item.statis["亚洲"] : 0);
        data2.push(item.statis["其他"] ? item.statis["其他"] : 0);
        data3.push(item.statis["北美洲"] ? item.statis["北美洲"] : 0);
        data4.push(item.statis["大洋洲"] ? item.statis["大洋洲"] : 0);
        data5.push(item.statis["欧洲"] ? item.statis["欧洲"] : 0);
      });
      var cp = ["亚洲", "北美洲", "大洋洲", "欧洲", "其他"];
      var option = {
        tooltip: {
          // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: "axis",
          backgroundColor: "rgba(32, 33, 36,.7)",
          borderColor: "rgba(32, 33, 36,0.20)",
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: "#fff",
            fontSize: "12",
          },
        },
        title: {
          text: "大洲感染总人数趋势图",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 12,
          },
          top: "3%",
          left: "center",
        },
        grid: {
          borderWidth: 0,
          top: "35%",
          left: "22%",
          right: "6%",
          bottom: "14%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          top: "12%",
          textStyle: {
            fontSize: "8px",
            fontFamily: "MicrosoftYaHeiUI",
            color: "#FFFFFF",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true, //隐藏X轴轴线
              symbol: ["none", "arrow"],
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              fontSize: "12px",
              interval: 8, //隔一个标签显示一个标题
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
            },
            axisLine: {
              show: true, //隐藏X轴轴线
              symbol: ["none", "arrow"],
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              fontSize: "12px",
              formatter: (params) => {
                return params + "";
              },
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: cp[0],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "rgba(255, 196, 53, 1)",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F0B62A", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#FFC12B", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data1,
          },
          {
            name: cp[1],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: "12px",
                    color: "#fff",
                  },
                },
                color: "#00CC99",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00CC99", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#00CC99", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data2,
          },
          {
            name: cp[2],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#33CCFF",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#33CCFF", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#33CCFF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data3,
          },
          {
            name: cp[3],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#9933FF",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9933FF", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#9933FF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data4,
          },
          {
            name: cp[4],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#FF6633",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FF6633", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#FF6633", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data5,
          },
        ],
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 世界每周新增治愈和死亡人数
    main3() {
      //echarts折线图
      var myChart = echarts.init(document.getElementById("main3"));
      let list = JSON.parse(JSON.stringify(this.globalDailyHistory));
      // 死亡人数
      let dataList = [];
      // 治愈人数
      let dataList2 = [];
      let dateList = [];
      list.map((item) => {
        let obj = { name: item.date, value: item.all.dead };
        let obj1 = { name: item.date, value: item.all.heal };
        dataList.push(obj);
        dataList2.push(obj1);
        dateList.push(item.date);
      });
      var option = {
        backgroundColor: "#031942",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["死亡人数", "治愈人数"],
          top: "12%",
          textStyle: {
            color: "#fff",
          },
        },
        title: {
          text: "世界每周新增治愈和死亡人数",
          left: "center",
          top: "4%",
          textStyle: {
            color: "#FFFFFF",
            fontSize: 15,
            fontWeight: 50000,
            fontFamily: "PingFang SC",
          },
        },
        grid: {
          left: "6%",
          right: "6%",
          bottom: "5%",
          top: "30%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: dataList.length > 15 ? 35 : 100,
          },
        ],
        xAxis: {
          axisLine: {
            lineStyle: {
              color: "#397cbc",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //轴线上的字
          axisLabel: {
            show: true,
            textStyle: {
              color: "#cecece",
              fontSize: "14",
            },
          },
          data: dateList,
        },
        yAxis: [
          {
            type: "value",
            splitNumber: 4,
            axisTick: {
              show: false,
            },
            //轴线上的字
            axisLabel: {
              textStyle: {
                fontSize: "12",
                color: "#cecece",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#397cbc",
              },
            },
            //网格线
            splitLine: {
              lineStyle: {
                color: "#11366e",
              },
            },
          },
        ],
        series: [
          {
            name: "死亡人数",
            type: "line",
            smooth: true, //是否平滑曲线显示
            showSymbol: false,
            itemStyle: {
              color: "#3eb5dd",
              borderColor: "#3eb5dd",
              borderWidth: 3,
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#57b3e5", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#31a9ea", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 30,
                shadowOffsetY: 5,
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(58,182,224, 0.2)",
                    },
                    {
                      offset: 0.6,
                      color: "rgba(58,182,224, 0.2)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(58,182,224, 0.01)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(58,182,224, 0.1)",
                shadowBlur: 6,
              },
            },
            data: dataList,
          },
          {
            name: "治愈人数",
            type: "line",
            smooth: true, //是否平滑曲线显示
            showSymbol: false,
            itemStyle: {
              color: "#00d887",
              borderColor: "#00d887",
              borderWidth: 3,
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00d887", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00d887", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "#00d887",
                shadowBlur: 12,
                shadowOffsetY: 5,
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.2)",
                    },
                    {
                      offset: 0.6,
                      color: "rgba(0, 216, 135, 0.2)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 216, 135, 0.01)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 216, 135, 0.2)",
                shadowBlur: 6,
              },
            },
            data: dataList2,
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 大洲感染人数饼状图
    main4() {
      var myChart = echarts.init(document.getElementById("main4"));
      var option = {
        tooltip: {
          trigger: "item",
        },
        color: ["#1089e7", "#f57474"],
        title: {
          text: "大洲感染人数饼状图",
          left: "center",
          top: "6%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          bottom: "5%",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 10, name: "北美洲" },
              { value: 1, name: "欧洲" },
            ],
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 境外输入病情top10省份
    main5() {
      var myChart = echarts.init(document.getElementById("main5"));
      let list = JSON.parse(JSON.stringify(this.TopList));
      let list1 = list.map((item) => ({
        name: item.province,
        value: item.importedCase,
      }));
      var option = {
        title: {
          text: "境外输入病情top10省份",
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
            fontSize: 14,
          },
        },
        grid: {
          top: 20,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#0076ff", "#60cda0", "#ed8884", "#ff9f7f"],
        series: [
          {
            name: "数量占比",
            type: "pie",
            radius: [20, 60],
            center: ["50%", "60%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 8,
            },
            data: list1,
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 地图
    map() {
      var myChart = echarts.init(document.getElementById("map"));
      var list = JSON.parse(JSON.stringify(this.foreignList));
      var list1 = list.map((item) => ({
        name: item.name,
        value: item.confirm,
      }));

      var nameMap = {
        Afghanistan: "阿富汗",
        Albania: "阿尔巴尼亚",
        Algeria: "阿尔及利亚",
        Andorra: "安道尔",
        Angola: "安哥拉",
        Antarctica: "南极洲",
        "Antigua and Barbuda": "安提瓜和巴布达",
        Argentina: "阿根廷",
        Armenia: "亚美尼亚",
        Australia: "澳大利亚",
        Austria: "奥地利",
        Azerbaijan: "阿塞拜疆",
        "The Bahamas": "巴哈马",
        Bahrain: "巴林",
        Bangladesh: "孟加拉国",
        Barbados: "巴巴多斯",
        Belarus: "白俄罗斯",
        Belgium: "比利时",
        Belize: "伯利兹",
        Benin: "贝宁",
        Bermuda: "百慕大",
        Bhutan: "不丹",
        Bolivia: "玻利维亚",
        "Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",
        Botswana: "博茨瓦纳",
        Brazil: "巴西",
        Brunei: "文莱",
        Bulgaria: "保加利亚",
        "Burkina Faso": "布基纳法索",
        Burundi: "布隆迪",
        Cambodia: "柬埔寨",
        Cameroon: "喀麦隆",
        Canada: "加拿大",
        "Cape Verde": "佛得角",
        "Central African Republic": "中非共和国",
        Chad: "乍得",
        Chile: "智利",
        China: "中国",
        Colombia: "哥伦比亚",
        Comoros: "科摩罗",
        "Republic of the Congo": "刚果共和国",
        "Costa Rica": "哥斯达黎加",
        Croatia: "克罗地亚",
        Cuba: "古巴",
        Cyprus: "塞浦路斯",
        "Czech Republic": "捷克共和国",
        Denmark: "丹麦",
        Djibouti: "吉布提",
        Dominica: "多米尼加",
        "Dominican Republic": "多明尼加共和国",
        Ecuador: "厄瓜多尔",
        Egypt: "埃及",
        "El Salvador": "萨尔瓦多",
        "Equatorial Guinea": "赤道几内亚",
        Eritrea: "厄立特里亚",
        Estonia: "爱沙尼亚",
        Ethiopia: "埃塞俄比亚",
        "Falkland Islands": "福克兰群岛",
        "Faroe Islands": "法罗群岛",
        Fiji: "斐济",
        Finland: "芬兰",
        France: "法国",
        "French Guiana": "法属圭亚那",
        "French Southern and Antarctic Lands": "法属南半球和南极领地",
        Gabon: "加蓬",
        Gambia: "冈比亚",
        "Gaza Strip": "加沙",
        Georgia: "格鲁吉亚",
        Germany: "德国",
        Ghana: "加纳",
        Greece: "希腊",
        Greenland: "格陵兰",
        Grenada: "格林纳达",
        Guadeloupe: "瓜德罗普",
        Guatemala: "危地马拉",
        Guinea: "几内亚",
        "Guinea Bissau": "几内亚比绍",
        Guyana: "圭亚那",
        Haiti: "海地",
        Honduras: "洪都拉斯",
        "Hong Kong": "香港",
        Hungary: "匈牙利",
        Iceland: "冰岛",
        India: "印度",
        Indonesia: "印尼",
        Iran: "伊朗",
        Iraq: "伊拉克",
        "Iraq-Saudi Arabia Neutral Zone": "伊拉克阿拉伯中立区",
        Ireland: "爱尔兰",
        "Isle of Man": "马恩岛",
        Israel: "以色列",
        Italy: "意大利",
        "Ivory Coast": "科特迪瓦",
        Jamaica: "牙买加",
        "Jan Mayen": "扬马延岛",
        Japan: "日本",
        Jordan: "约旦",
        Kazakhstan: "哈萨克斯坦",
        Kenya: "肯尼亚",
        Kerguelen: "凯尔盖朗群岛",
        Kiribati: "基里巴斯",
        "North Korea": "北朝鲜",
        "South Korea": "韩国",
        Kuwait: "科威特",
        Kyrgyzstan: "吉尔吉斯斯坦",
        Laos: "老挝",
        Latvia: "拉脱维亚",
        Lebanon: "黎巴嫩",
        Lesotho: "莱索托",
        Liberia: "利比里亚",
        Libya: "利比亚",
        Liechtenstein: "列支敦士登",
        Lithuania: "立陶宛",
        Luxembourg: "卢森堡",
        Macau: "澳门",
        Macedonia: "马其顿",
        Madagascar: "马达加斯加",
        Malawi: "马拉维",
        Malaysia: "马来西亚",
        Maldives: "马尔代夫",
        Mali: "马里",
        Malta: "马耳他",
        Martinique: "马提尼克",
        Mauritania: "毛里塔尼亚",
        Mauritius: "毛里求斯",
        Mexico: "墨西哥",
        Moldova: "摩尔多瓦",
        Monaco: "摩纳哥",
        Mongolia: "蒙古",
        Morocco: "摩洛哥",
        Mozambique: "莫桑比克",
        Myanmar: "缅甸",
        Namibia: "纳米比亚",
        Nepal: "尼泊尔",
        Netherlands: "荷兰",
        "New Caledonia": "新喀里多尼亚",
        "New Zealand": "新西兰",
        Nicaragua: "尼加拉瓜",
        Niger: "尼日尔",
        Nigeria: "尼日利亚",
        "Northern Mariana Islands": "北马里亚纳群岛",
        Norway: "挪威",
        Oman: "阿曼",
        Pakistan: "巴基斯坦",
        Panama: "巴拿马",
        "Papua New Guinea": "巴布亚新几内亚",
        Paraguay: "巴拉圭",
        Peru: "秘鲁",
        Philippines: "菲律宾",
        Poland: "波兰",
        Portugal: "葡萄牙",
        "Puerto Rico": "波多黎各",
        Qatar: "卡塔尔",
        Reunion: "留尼旺岛",
        Romania: "罗马尼亚",
        Russia: "俄罗斯",
        Rwanda: "卢旺达",
        "San Marino": "圣马力诺",
        "Sao Tome and Principe": "圣多美和普林西比",
        "Saudi Arabia": "沙特阿拉伯",
        Senegal: "塞内加尔",
        Seychelles: "塞舌尔",
        "Sierra Leone": "塞拉利昂",
        Singapore: "新加坡",
        Slovakia: "斯洛伐克",
        Slovenia: "斯洛文尼亚",
        "Solomon Islands": "所罗门群岛",
        Somalia: "索马里",
        "South Africa": "南非",
        Spain: "西班牙",
        "Sri Lanka": "斯里兰卡",
        "St. Christopher-Nevis": "圣",
        "St. Lucia": "圣露西亚",
        "St. Vincent and the Grenadines": "圣文森特和格林纳丁斯",
        Sudan: "苏丹",
        Suriname: "苏里南",
        Svalbard: "斯瓦尔巴特群岛",
        Swaziland: "斯威士兰",
        Sweden: "瑞典",
        Switzerland: "瑞士",
        Syria: "叙利亚",
        Taiwan: "台湾",
        Tajikistan: "塔吉克斯坦",
        "United Republic of Tanzania": "坦桑尼亚",
        Thailand: "泰国",
        Togo: "多哥",
        Tonga: "汤加",
        "Trinidad and Tobago": "特里尼达和多巴哥",
        Tunisia: "突尼斯",
        Turkey: "土耳其",
        Turkmenistan: "土库曼斯坦",
        "Turks and Caicos Islands": "特克斯和凯科斯群岛",
        Uganda: "乌干达",
        Ukraine: "乌克兰",
        "United Arab Emirates": "阿联酋",
        "United Kingdom": "英国",
        "United States of America": "美国",
        Uruguay: "乌拉圭",
        Uzbekistan: "乌兹别克斯坦",
        Vanuatu: "瓦努阿图",
        Venezuela: "委内瑞拉",
        Vietnam: "越南",
        "Western Sahara": "西撒哈拉",
        "Western Samoa": "西萨摩亚",
        Yemen: "也门",
        Yugoslavia: "南斯拉夫",
        "Democratic Republic of the Congo": "刚果民主共和国",
        Zambia: "赞比亚",
        Zimbabwe: "津巴布韦",
        "South Sudan": "南苏丹",
        Somaliland: "索马里兰",
        Montenegro: "黑山",
        Kosovo: "科索沃",
        "Republic of Serbia": "塞尔维亚",
      };

      var option = {
        timeline: {
          axisType: "category",
          orient: "vertical",
          autoPlay: true,
          inverse: true,
          playInterval: 5000,
          left: null,
          right: -105,
          top: 20,
          bottom: 20,
          width: 46,
        },
        baseOption: {
          visualMap: {
            type: "piecewise", //分段型。
            splitNumber: 6,
            inverse: true,
            pieces: [
              {
                min: 0,
                max: 0,
                color: "#eeeeee",
              },
              {
                min: 1,
                max: 499,
                color: "#fff7ba",
              },
              {
                min: 500,
                max: 4999,
                color: "#ffc24b",
              },
              {
                min: 5000,
                max: 9999,
                color: "#ff7c20",
              },
              {
                min: 10000,
                max: 100000,
                color: "#fe5e3b",
              },
              {
                min: 100000,
                max: 500000,
                color: "#e2482b",
              },
              {
                min: 500000,
                color: "#b93e26",
              },
            ],
            left: "left",
            top: "bottom",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: "#eee",
            },
            //min: 0,
            //max: 60000,
            //text:['High','Low'],
            //realtime: true,
            //calculable: true,
            //color: ['red','orange','lightgreen']
          },
          series: [
            {
              type: "map",
              map: "world",
              roam: true,
              itemStyle: {
                emphasis: { label: { show: false } },
              },
              nameMap: nameMap,
            },
          ],
        },

        options: [
          {
            tooltip: {
              trigger: "item",
              formatter: function (params) {
                var value = params.value;
                //value = value.toFixed(5);toFixed(3)控制小数位数
                value = value;
                if (!value) {
                  return;
                }
                //var abc=(params.abc);
                return params.name + " : " + value;
              },
            },
            series: {
              data: list1,
            },
            grid: {
              top: "10%",
            },
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.box {
  display: flex;
}
.left,
.right {
  width: 505px;
}
.left {
  margin: 4px 0 4px 4px;
}
.lmq {
  height: 120px;
}
.left > div {
  margin-bottom: 4px;
}
.right > div {
  margin-bottom: 4px;
}
.right {
  margin: 4px 4px 4px 0;
}
.center {
  width: 833px;
  margin: 4px 4px 0;
}
.main {
  height: 120px;
  margin-bottom: 6px;
}
.a {
  border: 1px solid #0a1c61;
  position: relative;
  // 左上角
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid #09a8ec;
    border-left: 1px solid #09a8ec;
    z-index: 999;
  }
  // 右上角
  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid #09a8ec;
    border-right: 1px solid #09a8ec;
    z-index: 999;
  }
}
.b {
  // 左下角
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #09a8ec;
    border-left: 1px solid #09a8ec;
    z-index: 999;
  }
  // 右下角
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-right: 1px solid #09a8ec;
    border-bottom: 1px solid #09a8ec;
    z-index: 999;
  }
}
.c-top {
  background: #0a1c61;
  opacity: 0.6;
  width: 100%;
  padding: 5px 0;
  ul {
    margin: 5px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #3b4d85;
    position: relative;
    text-align: center;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 20px;
      border-top: 1px solid #09a8ec;
      border-left: 1px solid #09a8ec;
    }
    &::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 10px;
      height: 20px;
      border-right: 1px solid #09a8ec;
      border-bottom: 1px solid #09a8ec;
    }
    li {
      font-family: "num";
      font-size: 16px !important;
      font-weight: 700;
      color: hsl(70, 100%, 70%);
      font-size: 11px;
      list-style: none;
      position: relative;
      float: left;
      width: 25%;
    }
    li:nth-child(-n + 3) {
      &::after {
        content: "";
        position: absolute;
        top: 9px;
        right: 0;
        width: 1px;
        height: 10px;
        background: #09a8ec;
      }
    }
  }
  div {
    display: flex;
    justify-content: space-around;
    color: white;
    margin-bottom: 6px;
    span {
      font-size: 7px;
    }
  }
}
// 地图
.map {
  height: 310px;
  position: relative;
  .map1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 218px;
    height: 218px;
    transform: translate(-50%, -50%);
    background: url("../../public/image/map.png");
    background-size: 100% 100%;
    opacity: 0.6;
  }
  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 234px;
    height: 234px;
    transform: translate(-50%, -50%);
    background: url("../../public/image/jt.png");
    background-size: 100% 100%;
    animation: rota 10s linear infinite;
  }
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 258px;
    height: 258px;
    transform: translate(-50%, -50%);
    background: url("../../public/image/lbx.png");
    background-size: 100% 100%;
    animation: rota1 10s linear infinite;
  }
  .tab {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 24px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
      width: 80px;
      height: 24px;
      background: #183e97;
      color: white;
      border-radius: 16px;
      text-align: center;
      line-height: 24px;
    }
  }
}
@keyframes rota {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
@keyframes rota1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>
